
  import './index.scss'
  import TableShow from './TableShow'
  import TopSelect from './TopSelect'
  import RWPagination from './WPagination'
  import React, {useState} from 'react'


  // react 组件的性能优化
  //写业务  


  //1 划分功能组件


  //2在父组件中  获取到数据 =》发送请求 =》获取到头部选择的最新的参数

function Guahao(){
     

  let   [lists,setLists] = useState([])
  let   [pageObj,setPageObj] = useState({})
  
  const getFatherT = (list:any,objs:any)=>{
   
    
    setLists(list) //列表的数据
     setTimeout(() => {
      setPageObj(objs)   
     }, 25);
  }


  // 
    return(
        <div className="guohaoBox">
          <div className='GuaHaotop'>
               <button>导入</button>
               <button>导出</button>
            </div>   
            {/*  头部筛选 模块 */}
             <TopSelect getFatherT={getFatherT}></TopSelect>
            {/* 表格展示 */}

            {/*  用户进入到 挂号页面  1默认数据 */}
             <TableShow list={lists} changes={['status']}></TableShow>
            {/* 分页 */}

            {/*  react 分页  =>不好设置
                currentPages:1
                pages:5
                totallPages:10
            */}
           <RWPagination pageObj={pageObj}></RWPagination>
        </div>
    )
}


export default Guahao